<template id="first">
	<view class="content">
        <!-- 注意，这里使用img标签，不要使用image标签，否者没有效果 -->
		<image class="logo" src="/static/logo.png" border="0" usemap="#logomap"></image>
		<!-- <map name="logomap" id="logomap">
			<area shape="poly" coords="66,49,48,49,46,156,152,157,152,50,132,51,132,138,67,137" href="#">
		</map> -->
		<mapelement></mapelement>
	</view>
</template>
 
<script>
export default {
	data() {
		return {};
	},
	onLoad() {},
	components: {
		mapelement: {
			render:(createElement) => {
				var pElem1 = createElement('area', {
					attrs: {
						//区域的形状（default、rect、circ、poly）
						shape: 'poly',
						//定义可点击区域（对鼠标敏感的区域）的坐标
						coords:'68,49,46,49,46,158,153,159,153,49,132,49,132,138,67,138',
						href: 'javascript:void(0)'
					},
					on: {
						click:() => {
							// uni.showToast({
							// 	icon:'none',
							// 	title:'Hello'
							// })
							console.log("hello");
						}
					}
				});
				return createElement(
					'map',
					{
						attrs: {
							name: 'logomap',
							id: 'logomap'
						}
					},
					[
						pElem1 //想要添加更多area,可在数组中继续添加。如[pElem1,pElem2,…]
					]
				);
			}
		}
	},
	methods: {}
};
</script>
 
<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
 
.logo {
	height: 400rpx;
	width: 400rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}
</style>